<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>em,rem,px</title>
		<style>
			h1{
				font-size: 4em;
				-webkit-text-fill-color: #000000;
				-webkit-text-stroke-color: red;
				-webkit-text-stroke-width: 3px;
			}
			.box2{
				font-size: 20px;	
			}
			.box2 p{
				font-size: 2em;
			}
			.box2 div{
				font-size: 2em;
				width: 20em;
				height: 2em;
				line-height: 2em;
				padding: 1em 0;
				background-color: cadetblue;
			}
			.box3{
				font-size: 30px;
				width: 10em;
				height: 4em;
				line-height: 4em;
				text-align: center;
				background: -webkit-linear-gradient(left, #aec, #f96);
			}
			.box3 button{
				width: 4em;
				height: 2em;
				border-radius: .2em;
				border: none;
				outline: none;
				font-size: inherit;
				background-color: hsla(0,50%,50%,0.5);
				cursor: pointer;
			}
			.box3 button:hover{
				opacity: .6;
			}
		</style>
	</head>
	<body>
		<h1>em:用于字体，相对父元素的字体尺寸计算；用于其他，相对于本元素字体尺寸计算</h1>
		<h2>1.默认字体大小是16px</h2>
		<div class="box box1">
			<p>这是继承的默认字体大小</p>
		</div>
		<br />
		<h2>2.改变box2字体大小为20px</h2>
		<div class="box box2">
			<p>这是设置的2em</p>
			<div>这个宽度是20em,高2em</div>
		</div>
		<br />
		<h2>3.都用em，那宽高行高圆角都是等比例的</h2>
		<div class="box3">
			<button>yes!</button>
		</div>
		<h2>4.line-height1.5和line-height:150%的区别</h2>
		<ul>
			<li>父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。</li>
			<li>父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。</li>
		</ul>
	</body>
</html>
